<template>
    <div>
        <el-form
                :rules="rules"
                :model="loginForm"
                class="loginContainer"
                ref="loginForm">
            <h3 class="loginTitle">系统登陆</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password"><!-- prop 表单验证 -->
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码" />
            </el-form-item>
            <el-checkbox class="loginRemember" v-model="checked">记住密码</el-checkbox>
            <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
            <!--            <el-button type="primary" style="width: 49%">注册</el-button>-->
        </el-form>
    </div>
</template>

<script>
    import {postKeyValueRequest} from "../utils/api";
    export default {
        name: "Login",
        data() {
            return {
                loginForm:{
                    username: "admin",
                    password: "123",
                },
                checked:true,
                rules:{
                    username:[{required:true,message:"请输入用户名",trigger:"blur"}],
                    password:[{required:true,message:"请输入密码",trigger:"blur"}]
                }
            };
        },
        methods: {
            submitLogin() {
                // 首先只有校验通过才能点击提交，elementui 官网
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        postKeyValueRequest('/doLogin',this.loginForm).then(res=>{
                            if (res) {
                                // 登录成功后 将用户信息存入 sessionStorage
                                window.sessionStorage.setItem("user", JSON.stringify(res.obj));
                                // 登陆成功后跳转页面:
                                // 获取 前台输入的重定向的 地址
                                let path = this.$route.query.redirect;
                                // 三目，看它跳到哪
                                this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                                // alert(JSON.stringify(res))
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>
